import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CardInfoPage extends StatefulWidget {
  final int cardIndex;
  final List nums;
  final int colorId;
  final Function onChang;
  const CardInfoPage({super.key, required this.cardIndex, required this.nums, required this.colorId, required this.onChang});

  @override
  State<CardInfoPage> createState() => _CardInfoPageState();
}

class _CardInfoPageState extends State<CardInfoPage> {


  List<Color> cardColors = [Colors.pinkAccent, Colors.lightBlueAccent, Colors.yellowAccent, Colors.purpleAccent];

  late TextEditingController controller;
  late Timer _timer;

  // Card编辑起始位置
  int editStartIndex = 0;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();

    controller.addListener(() {
      if(controller.value.text.length >= 2) {
        goNextInput();
      }
    });
  }


  goNextInput() {
    setState(() {
      widget.nums[editStartIndex] = int.parse(controller.value.text.toString());
      editStartIndex = editStartIndex+1 < 25 ? editStartIndex+1 : 24;
    });
    _timer = Timer.periodic(const Duration(milliseconds: 300) , (timer){
      controller.clear();
      _timer.cancel();
    });

  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // automaticallyImplyLeading: false,
        title: const Text('BingGo Bomb', style: TextStyle(color: Colors.black87),),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        centerTitle: true,
        actions: <Widget>[
          IconButton(
              icon: const Icon(CupertinoIcons.checkmark_alt, color: Colors.black87,),
              tooltip: 'liked_widget_bloc',
              onPressed: () {
                // widget.onChang(widget.colorId, widget.cardIndex, widget.nums,);
                Navigator.of(context).pop();
              }),
        ],
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              width: 260,
              height: 260,
              margin: EdgeInsets.only(top: 15, bottom: 15),
              child: Card(
                color: Colors.black,
                elevation: 4,
                shape: RoundedRectangleBorder(),
                child: Container(
                  margin: EdgeInsets.only(left: 2, top: 2,right: 2, bottom: 2),
                  child: GridView.count(
                    crossAxisCount: 5,
                    mainAxisSpacing: 2,
                    crossAxisSpacing: 2,
                    children: buildItem(widget.nums),
                  ),
                ),
              ),
            ),

            TextField(
              controller: controller,
            ),
          ],
        ),
      )
    );
  }

  List<Widget> buildItem(List ids) {
    List<Widget> listWidgets = [];

    for(int i = 0;i < ids.length; i++) {

      listWidgets.add(
        InkWell(
          child:
        Container(
          width: 20,
          height: 20,
          color: cardColors[widget.colorId],
          alignment: Alignment.center,
          child: Text( ids[i].toString(),
            style: TextStyle(
                color: Colors.black,
                fontSize: 24,
                fontWeight: FontWeight.bold
            ),
          ),
        ),

          onTap: () {
            print('你点击我了。');
            // cardItemTap(i);
            print(i);
            setState(() {
              editStartIndex = i;
            });
          },
        )
      );
    }
    // cardNums.add(cardNum);
    return listWidgets;
  }

}
